<template>
  <div class="FileView">
    <div v-for="(file, index) in files" :key="index">
      <span @click="open(file.url)">
        <i class="el-icon-document"></i>{{file.name}}
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'FileView',
  props: {
    files: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    open (path) {
      const xhr = new XMLHttpRequest()
      const url = path
      const fileName = url.split('/').pop()
      xhr.open('get', url)
      xhr.responseType = 'blob'
      xhr.send()
      xhr.onload = function (sues) {
        const data = xhr.response
        const imgurl = URL.createObjectURL(data)
        let a = document.createElement('a')
        a.href = imgurl
        a.download = fileName || ''
        a.click()
        a = null
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.FileView {
  >div {
    &:hover {
      color: $--color-primary;
    }
    padding: 2px 0;
    >span {
      cursor: pointer;
    }
  }
}
</style>
